<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="用户详情"
      width="50%"
      :before-close="handleClose"
    >
      <div class="p-6">
        <div class="grid grid-cols-2 gap-6">
          <div class="bg-white !rounded-lg">
            <div class="flex items-center mb-6">
              <img src="data:," class="w-20 h-20 !rounded-full mr-4" />
              <div>
                <h3 class="text-xl font-medium text-gray-900 mb-1">橙子</h3>
                <p class="text-sm text-gray-500">英短 · 2岁3个月</p>
              </div>
            </div>
            <div class="space-y-4">
              <div>
                <h4 class="text-sm font-medium text-gray-700 mb-2">基本信息</h4>
                <div class="bg-gray-50 !rounded-lg p-4 space-y-3">
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">性别</span>
                    <span class="text-gray-900">母</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">年龄</span>
                    <span class="text-gray-900">2岁3个月</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">品种</span>
                    <span class="text-gray-900">英国短毛猫</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">毛色</span>
                    <span class="text-gray-900">橘白</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">体重</span>
                    <span class="text-gray-900">4.2kg</span>
                  </div>
                </div>
              </div>
              <div>
                <h4 class="text-sm font-medium text-gray-700 mb-2">健康状况</h4>
                <div class="bg-gray-50 !rounded-lg p-4 space-y-3">
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">绝育状态</span>
                    <span class="text-gray-900">已绝育</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">芯片编号</span>
                    <span class="text-gray-900">900001234567</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-white !rounded-lg">
            <div>
              <h4 class="text-sm font-medium text-gray-700 mb-2">疫苗预约</h4>
              <div class="bg-gray-50 !rounded-lg p-4 space-y-3">
                <div class="text-sm text-gray-500">2023-09-15 14:00</div>
                <div class="text-sm text-gray-500">2023-10-20 15:30</div>
                <div class="text-sm text-gray-500">2023-11-15 10:00</div>
              </div>
            </div>
            <div class="mt-4">
              <h4 class="text-sm font-medium text-gray-700 mb-2">饮食预约</h4>
              <div class="bg-gray-50 !rounded-lg p-4 space-y-3">
                <div class="text-sm text-gray-500">2023-09-10 09:00</div>
                <div class="text-sm text-gray-500">2023-09-25 14:30</div>
                <div class="text-sm text-gray-500">2023-10-15 11:00</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
// 接收参数
const props = defineProps(["open"]);
const status: any = reactive(props);
// eslint-disable-next-line vue/no-dupe-keys
const { open } = toRefs(status);
// 返回参数方法
const emits = defineEmits("detailChange");
// 控制显示隐藏
const dialogVisible = ref(false);
// 关闭
const handleClose = () => {
  dialogVisible.value = false;
  emits("detailChange", dialogVisible.value);
};
// tabs值
const activeName = ref("first");
const handleClick = (t, e) => {
  activeName.value = t.props.name;
};
onMounted(() => {
  console.log("onMounted");
  dialogVisible.value = open;
});
</script>

<style scoped></style>
